<div fxFlexLayout="row" fxLayoutAlign="center">
  <div fxFlex.lt-md="1 1 100%" fxFlex="1 1 70%">
    <span>
      <a routerLink="/{{author}}/{{projectName}}/issues/" style="color: black;margin-top: 3em;">
        <mat-icon style="font-size: 30px; padding-top: 0.3em;">keyboard_backspace</mat-icon>
      </a>
    </span>
    <h1 style="color: #2196F3; font-size: 24px;">
      {{issue.Title}}
    </h1>

    <div *ngIf="issue.Comments && issue.Comments.length > 0">
      <app-comment [comment]="c" (onCommentUpdate)="getIssue()" *ngFor="let c of issue.Comments.slice(this.currentPage * 10, (this.currentPage + 1) * 10)">
      </app-comment>
      <mat-paginator *ngIf="issue.Comments.length > 10" style="margin-top: 1em;" [length]="issue.Comments.length" [pageSize]="10"
        [pageSizeOptions]="[50, 100, 200]" (page)="pageChanged($event)">
      </mat-paginator>
    </div>
    <div>
      <mat-card style="margin-top: 2em; padding-top: 0.5em; margin-bottom: 0.5em;">
        <mat-card-title>
        </mat-card-title>
        <div fxLayout="row">
          <div fxFlex="1 1 92.5%">
            <h3>Post a comment</h3>
          </div>
        </div>
        <div>
          <textarea name="comment" [(ngModel)]="commentContent" style="font-family:Times New Roman; color:#040505 ; font-size: 20px;"
            fxLayout="row wrap" fxLayoutAlign="space-between" fxFlex="1 1 100%" rows="10" cols="300px">
          </textarea>
        </div>
        <div style="margin-top: 2em; padding-top: 0.5em">
          <button mat-raised-button style="background-color: rgb(0,192,66);" (click)="addComment()">
            <font color="white">
              <b>Comment</b>
            </font>
          </button>
        </div>
      </mat-card>
    </div>
  </div>
</div>